<template>
  <div class="flowpath-container">
    <div>
      <div class="mb20">
        <span class="color_494949 ft12 pr5">{{ translate('时间') }}：</span>
        <el-date-picker
          v-model="searchInfo"
          style="width: 164px"
          type="date"
          value-format="YYYY-MM-DD"
          @change="changetime"
        />
        <el-button class="settingBtn ml10" type="primary" @click="getList">
          {{ translate('查询') }}
        </el-button>
      </div>
      <el-table :data="tableData">
        <!-- <el-table-column label="序号" type="index" width="80" /> -->
        <el-table-column
          :label="translate('用户名称')"
          prop="UserName"
          show-overflow-tooltip
        />
        <el-table-column
          :label="translate('开始时间')"
          prop="BeginDate"
          show-overflow-tooltip
        />
        <el-table-column
          :label="translate('浏览器类型')"
          prop="BrowserType"
          show-overflow-tooltip
        />
        <!-- <el-table-column label="服务器IP" prop="ServiceIP" /> -->
        <el-table-column :label="translate('日志类型')" prop="LogType" />
        <el-table-column :label="translate('异常信息')" prop="ExceptionInfo" />
        <el-table-column :label="translate('请求地址')" prop="Url" />
        <el-table-column :label="translate('响应状态')" prop="Success" />
        <el-table-column :label="translate('时长(毫秒)')" prop="ElapsedTime" />
        <!-- <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button
              v-if="MenuAuths('edit')"
              link
              size="small"
              type="primary"
              @click="detailFn(row)"
            >
              详情
            </el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          :current-page="pageNo"
          :layout="layout"
          :page-size="pageSize"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
    <!-- <el-dialog
      v-model="dialogVisible"
      :title="translate('详情')"
      width="900px"
      @close="closeFn"
    >
      <div>xxx</div>
      <template #footer>
        <el-button @click="dialogVisible = false">
          {{ translate('取消') }}
        </el-button>
      </template>
    </el-dialog> -->
  </div>
</template>

<script>
  import { Sys_LogData, Sys_LogDetail } from '@/api/form'
  import { MenuAuth } from '~/src/utils/permission'
  import { translate } from '@/i18n'
  export default defineComponent({
    name: 'Arrival',
    components: {},
    data() {
      return {
        tableData: [],
        searchInfo: '',
        total: 0,
        pageNo: 1,
        pageSize: 20,
        dialogVisible: false,
        enabled: 0,
        DetailPageData: {},
        chileddetail: [],
        submitType: 'add',
        layout: 'total, sizes, prev, pager, next, jumper',
        seachno: '',
        MenuAuths: '',
        translate: translate,
      }
    },
    created() {
      this.MenuAuths = MenuAuth
      this.getList()
    },
    methods: {
      changetime() {
        this.getList()
      },
      async getList() {
        const params = {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          tableName: '',
          sort: '',
          order: '',
          wheres: JSON.stringify([
            {
              name: 'BeginDate',
              value: this.searchInfo,
              displayType: 'ThanOrEqual',
            },
          ]),
          export: false,
          value: '',
        }
        const data = await Sys_LogData(params)
        this.tableData = data.data.rows
        this.total = data.data.total
        console.log(this.tableData)
      },

      //分页条数切换
      handleSizeChange(val) {
        this.pageSize = val
        this.getList()
      },
      //分页切换
      handleCurrentChange(val) {
        this.pageNo = val
        this.getList()
      },
      closeFn() {
        this.enabled = 0
      },
      async detailFn(row) {
        this.submitType = 'edit'
        await Sys_LogDetail(row)
        this.dialogVisible = true
      },
      async Sys_LogDetail(row) {
        const params = {
          id: row.Id,
        }
        const data = await Sys_LogDetail(params)
        console.log(data)
      },
    },
  })
</script>
<style lang="scss" scoped>
  .flowpath-container {
    .color_494949 {
      color: #494949;
    }
    .w164 {
      width: 164px;
    }
    .mb20 {
      margin-bottom: 20px;
    }
    .mr10 {
      margin-right: 10px;
    }
    .ml10 {
      margin-left: 10px;
    }
  }
</style>
